<template>
  <template v-for="item in items" :key="item">
    <tr>
      <td>
        <v-checkbox-btn
          :model-value="isSelected"
          color="primary"
          @update:model-value="(value) => toggleSelect(item)"
        />
      </td>
      <td :class="['!pl-[' + depth * 30 + 'px]']">{{ item.tagId }}</td>
      <td>{{ item.description }}</td>
      <td>{{ item.value }}</td>

    </tr>

    <!-- 递归渲染子项 -->
    <TableRow
      v-if="item.children && item.children.length"
      :items="item.children"
      :depth="depth + 1"
      :isSelected="isSelected"
      :toggleSelect="toggleSelect"
    />
  </template>
</template>

<script setup>
import { inject } from "vue";

const {
  editTagInfo,
  showEditTag
} = inject('tagInfo')
const edit = (val) => {
  editTagInfo.value = val;
  showEditTag.value = true
}
const remove = (val) => {}
 const props = defineProps({
  items: {
    type: Array
  },
  depth: {
    type: Number
  },
   isSelected: {
     type: Boolean,
     required: true
   },
   toggleSelect: {
     type: Function,
     required: true
   }
})

</script>
